<script lang="ts" setup>
import { WarningOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import moment from "moment";
import { createVNode, nextTick, ref } from "vue";
import { deleteUser, getUser, saveOrUpdateUser, User } from "../../api/user";

const emit = defineEmits(["finished"]);

const visible = ref(false);
const spinning = ref(true);
const formRef = ref();
const formState = ref<User>({
  username: "",
  password: "",
});
const rules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  regTime: [{ required: true, message: "请输入注册日期", trigger: "blur", type: "object" }],
};

const onSubmit = async () => {
  try {
    await formRef.value.validate();
  } catch {
    return;
  }
  let { data } = await saveOrUpdateUser(formState.value);
  message.success(data.message);

  emit("finished");
  visible.value = false;
};

const init = async (id: number) => {
  visible.value = true;
  spinning.value = true;
  formState.value.id = id;
  await nextTick();
  formRef.value.resetFields();
  if (id) {
    let { data } = await getUser(id);
    formState.value = data.data;
    formState.value.regTime = moment(data.data.regTime);
  }
  spinning.value = false;
};

const onDelete = async () => {
  Modal.confirm({
    title: () => "删除用户",
    content: () => "是否删除",
    icon: () => createVNode(WarningOutlined),
    okText: () => "Yes",
    okType: "danger",
    cancelText: () => "No",
    async onOk() {
      if (!formState.value.id) {
        return;
      }
      let { data } = await deleteUser(formState.value.id);

      // 提示成功
      message.success(data.message);
      emit("finished");
      visible.value = false;
    },
  });
};

defineExpose({
  init,
});
</script>

<template>
  <a-drawer
    :title="formState.id ? '修改用户' : '新增用户'"
    placement="right"
    :mask-closable="false"
    :width="720"
    v-model:visible="visible"
  >
    <a-spin :spinning="spinning">
      <a-form ref="formRef" :rules="rules" :model="formState" layout="vertical">
        <a-form-item label="ID" name="id" v-if="formState.id != null">
          <a-input v-model:value="formState.id" disabled />
        </a-form-item>
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="formState.username" />
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input v-model:value="formState.password" />
        </a-form-item>
        <a-form-item label="注册时间" name="regTime">
          <a-date-picker
            v-model:value="formState.regTime"
            show-time
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="onSubmit">提交</a-button>
            <a-button v-if="formState.id" danger @click="onDelete">删除</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-drawer>
</template>
